<!--填报课程考核实施计划-->
<template>
  <div class="paperprint-container">
    <div class="search-container">
      <div class="search-container-left">
        <div
          class="search-container-item"
          v-for="(select, index) in selectList"
          :key="index"
        >
          <div class="search-container-item">
            <span>学期: </span>
            <el-select
              v-model="xueqi"
              style="width: 91px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in jcList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-container-item">
          <span>培养层次: </span>
          <el-select
            v-model="level"
            style="width: 121px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in levelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型: </span>
          <el-select
            v-model="studytypecode"
            style="width: 122px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in studytypecodeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-container-item">
          <span>学 号:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="studentid"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>学员姓名:</span>
          <el-input
            style="width: 142px"
            size="mini"
            placeholder="请输入课程负责单位"
            v-model="name"
          ></el-input>
        </div>
      </div>
      <div
        class="search-container-right"
        style="justify-content: space-between"
      >
        <div class="search-container-left">
          <div class="search-container-item">
            <span>年级: </span>
            <el-select
              v-model="grade"
              style="width: 91px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in njList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item" style="margin-left: 30px">
            <span>专业班次: </span>
            <el-select
              v-model="majorclass"
              style="width: 121px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in zybcList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>课程名称: </span>
            <el-input
              style="width: 122px"
              size="mini"
              placeholder="请输入课程负责单位"
              v-model="prelectcourse"
            ></el-input>
          </div>

          <div class="search-container-item" style="margin-top: 4px">
            <span>查看期中不及格人员:</span>
            <el-checkbox
              v-model="qzbjg"
              :disabled="chak"
              @change="ckqz"
            ></el-checkbox>
          </div>
          <div
            class="search-container-item"
            style="margin-top: 4px; margin-left: 20px"
          >
            <span>查看总评不及格人员:: </span>
            <el-checkbox
              v-model="zpbjg"
              :disabled="chak2"
              @change="ckzp"
            ></el-checkbox>
          </div>
        </div>
        <div class="search-container-right" @click="chax">
          <div class="search-button">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
        </div>
      </div>
    </div>

    <div class="table-container">
      <div class="table-header">
        <!-- <div class="item" style="width: 67px">
          <el-checkbox
            v-model="rowColumnChecked"
            @change="selectCheck('all')"
          ></el-checkbox>
        </div> -->
        <div class="item" style="width: 135px">学期</div>
        <div class="item" style="width: 108px">年级</div>
        <div class="item" style="width: 106px">专业班次</div>
        <div class="item" style="width: 115px">课程编号</div>
        <div class="item" style="width: 115px">课程名称</div>
        <div class="item" style="width: 118px">修习类型</div>
        <div class="item" style="width: 109px">学号</div>
        <div class="item" style="width: 116px">姓名</div>
        <div class="item" style="width: 111px">课下作业成绩</div>
        <div class="item" style="width: 114px">课堂测评成绩</div>
        <div class="item" style="width: 114px">期中考试成绩</div>
        <div class="item" style="width: 135px">课终考核成绩</div>

        <div class="item" style="width: 141px">总评成绩</div>
        <div class="item" style="width: 116px">补考成绩</div>
        <div class="item" style="width: 111px">备注</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 135px">{{ item.xueqi }}</div>
        <div class="item" style="width: 108px">{{ item.grade }}</div>
        <div class="item" style="width: 106px">{{ item.majorclass }}</div>
        <div class="item" style="width: 115px">{{ item.courseno }}</div>
        <div class="item" style="width: 115px">{{ item.prelectcourse }}</div>
        <div class="item" style="width: 118px">{{ item.studytypecode }}</div>
        <div class="item" style="width: 109px">{{ item.studentid }}</div>
        <div class="item" style="width: 116px">{{ item.name }}</div>
        <div class="item" style="width: 111px">{{ item.checkusualscore }}</div>
        <div class="item" style="width: 114px">
          {{ item.checkexperimentscore }}
        </div>
        <div class="item" style="width: 114px">
          {{ item.checkmidtermscore }}
        </div>
        <div class="item" style="width: 135px">{{ item.issue }}</div>

        <div class="item" style="width: 141px">{{ item.scorenumber }}</div>
        <div class="item" style="width: 116px">{{ item.bkscore }}</div>

        <div class="item" style="width: 111px">{{ item.comments }}</div>
      </div>
    </div>

    <el-dialog
      title="审批进度"
      :visible.sync="showAddMessageRemark"
      width="983px"
    >
      <span slot="footer" class="dialog-footer">
        <div class="spjd">
          <div class="time-line-horizon">
            <div
              class="time-line-block"
              v-for="(block, index1) in pjChecks"
              :key="index1"
            >
              <div class="person-name">{{ block.job }}</div>
              <div class="line-content">
                <img
                  src="../../../assets/assessment/icon-finish.png"
                  alt="已完成"
                  v-if="+block.state === 0"
                />
                <img
                  src="../../../assets/assessment/icon-dai.png"
                  alt="待完成"
                  v-if="+block.state === 1"
                />
                <img
                  src="../../../assets/assessment/icon-close.png"
                  alt="未完成"
                  v-if="+block.state === 2"
                />
                <div class="date-time">
                  <span class="date">{{ block.checkdate }}</span>
                  <span class="time">{{ block.time }}</span>
                </div>
              </div>
              <!--                  待完成0 添加留言 ， 1 已完成 查看删除编辑 ， 2 未完成-->
              <div
                class="operate"
                v-show="block.text"
                v-if="+block.state === 1"
              >
                <!--                    showAddMessageDialog = true-->
                <div
                  class="ly-block"
                  @click="textupdate(block.checkid, block.text)"
                >
                  <img src="../../../assets/assessment/icon-ly.png" alt="" />
                  <div class="ly">留言</div>
                </div>
              </div>
              <div
                class="operate"
                v-show="block.text"
                v-if="+block.state === 0"
              >
                <div class="bubble-block">
                  <span>{{ block.text }}</span>
                  <div class="operate-button">
                    <!--                         @click="showckMessageDialog = true"-->
                    <div
                      class="button-ck"
                      @click="textsave(block.checkid, block.text)"
                      v-show="block.text"
                      v-if="+block.state === 0"
                    >
                      查看
                    </div>
                    <div
                      class="button-bj"
                      @click="textupdate(block.checkid, block.text)"
                      v-show="block.text"
                      v-if="+block.state === 0"
                    >
                      编辑
                    </div>
                    <div
                      @click="textdelete(block.checkid)"
                      class="button-sc"
                      v-show="block.text"
                      v-if="+block.state === 0"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </div>
              <el-dialog
                title="添加留言"
                :visible.sync="showAddMessageDialog"
                width="983px"
              >
                <div class="message-container">
                  <div>添加留言：</div>
                  <div>
                    <el-input
                      v-model="text"
                      type="textarea"
                      :rows="8"
                      style="width: 550px"
                    ></el-input>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <button class="green" @click="addText(block.checkid, text)">
                    确 定
                  </button>
                </span>
              </el-dialog>
              <el-dialog
                title="编辑留言"
                :visible.sync="showbjMessageDialog"
                width="983px"
              >
                <div class="message-container">
                  <div>编辑留言：</div>
                  <div>
                    <el-input
                      v-model="text"
                      type="textarea"
                      :rows="8"
                      style="width: 550px"
                    ></el-input>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <!--                      showbjMessageDialog = false-->
                  <button class="green" @click="update(block.checkid)">
                    确 定
                  </button>
                </span>
              </el-dialog>
              <el-dialog
                title="查看留言"
                :visible.sync="showckMessageDialog"
                width="983px"
              >
                <div class="message-container">
                  <div>查看留言：</div>
                  <div>
                    <!--                        v-model="block.bjmeaasgeText"-->
                    <el-input
                      v-model="text"
                      type="textarea"
                      :rows="8"
                      style="width: 550px"
                      disabled="false"
                    ></el-input>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <button class="green" @click="showckMessageDialog = false">
                    确 定
                  </button>
                </span>
              </el-dialog>
            </div>
          </div>
        </div>
        <button class="green" @click="showAddMessageRemark = false">
          确 定
        </button>
      </span>
    </el-dialog>
    <el-dialog
      title="命题计划打回原因"
      :visible.sync="showBackDialog"
      width="983px"
      class="back-container"
    >
      <div class="back-textas">
        <div>打回原因：</div>
        <div>
          <el-input
            v-model="meaasgeText"
            type="textarea"
            :rows="8"
            style="width: 550px; margin-left: 30px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showBackDialog = false">确 定</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { kckhdated, kckhdatec } from "@/api/student/student";
export default {
  data() {
    return {
      chak: false,
      chak2: false,
      //审批进度
      checked: false,
      checkeda: false,
      showAddMessageRemark: false,
      showBackDialog: false,
      state: "1",
      course: "",
      xq: "1，2",
      selectList: [
        {
          type: "data",
          name: "学期：",
          val: undefined,
        },
      ],
      sqwr: "一队",
      sqwrList: [
        {
          value: "一队",
          label: "一队",
        },
        {
          value: "二队",
          label: "二队",
        },
      ],
      xueqi: "",
      level: "",
      name: "",
      studentid: "",
      prelectcourse: "",
      grade: "",
      studytypecode: "",
      nj: "",
      jcList: [
        {
          value: "2021级",
          label: "2021级",
        },
        {
          value: "2022级",
          label: "2022级",
        },
      ],
      njList: [
        {
          value: "2021级",
          label: "2021级",
        },
        {
          value: "2022级",
          label: "2022级",
        },
      ],
      levelList: [
        {
          value: "专科",
          label: "专科",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      studytypecodeList: [
        {
          value: "必修",
          label: "必修",
        },
        {
          value: "选修",
          label: "选修",
        },
      ],
      zybc: "专业班次2",
      zybcList: [
        {
          value: "专业班次2",
          label: "专业班次2",
        },
        {
          value: "专业班次1",
          label: "专业班次1",
        },
      ],
      zt: "待下发核对",
      ztList: [
        {
          value: "待下发核对",
          label: "待下发核对",
        },
        {
          value: "已下发核对",
          label: "已下发核对",
        },
      ],
      level: "",
      ppccList: [
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],

      nj: "",
      njList: [
        {
          value: "2021",
          label: "2021",
        },
        {
          value: "2022",
          label: "2022",
        },
      ],

      kcfzr: "",
      kcfzrList: [
        {
          value: "李丽",
          label: "李丽",
        },
        {
          value: "万万",
          label: "万万",
        },
      ],
      pjChecks: [
        {
          job: "教员",
          checkdate: "2021-06-04",
          time: "17：52",
          url: "icon-finish",
          text: "留言",
          state: "0",
        },
        {
          job: "教研室主任",
          checkdate: "2021-06-04",
          time: "17：52",
          url: "icon-dai",
          text: "操作",
          state: "1",
        },
        {
          job: "领导3",
          checkdate: "2021-06-05",
          time: "10：52",
          url: "icon-close",
          text: "操作",
          state: "2",
        },
      ],
      tableData: [
        {
          kcbh: "2020春",
          kcmc: "",
          kcfzr: "34541",
          jys: "语言分析专题",
          kskc: "必修",
          skjy: "1782678",
          ksfs: "璃妹妹",
          cdxq: "80",
          db: "80",
          jc: "20",
          zybc: "80",
          rs: "90",
          cd: "2021秋",
          jky: "70",
          bz: "",
        },
        {
          kcbh: "2020春",
          kcmc: "",
          kcfzr: "34541",
          jys: "语言分析专题",
          kskc: "必修",
          skjy: "1782678",
          ksfs: "璃妹妹",
          cdxq: "80",
          db: "80",
          jc: "20",
          zybc: "80",
          rs: "90",
          cd: "2021秋",
          jky: "70",
          bz: "",
        },
      ],
    };
  },
  methods: {
    kckhdate() {
      let obj = {
        xueqi: "",
      };
      return new Promise(() => {
        kckhdated(obj).then((res) => {
          this.tableData = res.data.data;
        });
      });
    },
    chax() {
      let obj = {
        xueqi: this.xueqi,
        level: this.level,
        studytypecode: this.studytypecode,
        studentid: this.studentid,
        name: this.name,
        grade: this.nj,
        majorclass: this.majorclass,
        prelectcourse: this.prelectcourse,
      };
      return new Promise(() => {
        kckhdatec(obj).then((res) => {
          this.tableData = res.data.data;
        });
      });
    },
    ckqz() {
      this.chak2 = !this.chak2;
      let obj = {
        // xueqi: this.xueqi,
        qzbjg: this.qzbjg,
        xueqi:'2020春'
      };
      return new Promise(() => {
        kckhdatec(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    ckzp() {
      this.chak = !this.chak;
      let obj = {
        // xueqi: this.xueqi,
        zpbjg: this.zpbjg,
        xueqi:'2020春'
      };
      return new Promise(() => {
        kckhdatec(obj).then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        });
      });
    },
    auditStatus() {
      this.state = 2;
    },
    RouterTo() {
      this.$router.push("/admin/planManagement/editPlanManage");
    },
  },
  created() {
    this.kckhdate();
  },
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 90px;
}

.back-textas {
  margin-top: 33px;

  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }
  }
}
.item_btn {
  width: 55px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.manual-entry-container {
  .el-dialog__body {
    > div {
      width: 1014px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      border-radius: 6px;
      margin: 0 auto;
      > div {
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);
        &:last-child {
          border-bottom: none;
        }
        > div {
          display: flex;
          > div {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:nth-child(1) {
              width: 80%;

              text-align: center;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
            }
            &:nth-child(1) {
              height: 200px;
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 43px;
  }
  .dialog-footer {
    > button {
      width: 91px;
      height: 36px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 6px;
      background: rgba(255, 246, 239, 1);
      font-size: 18px;
      color: #f3b815;
    }
  }
}
.assessment-container {
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;
      .el-radio {
        margin-right: 79px;
      }
    }
    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }
  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;
      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }
        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }
        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;
          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;
            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }
          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }
    .el-dialog__footer {
      padding-bottom: 76px;
      .green {
        padding: 1px 17px;
      }
    }
  }
}
.plan-entry-table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }
  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #02c86c;
    }
  }
  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;
    &:last-child {
      margin-bottom: 0px;
    }
    > span {
      color: #f3b815;
    }
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-printsage.less";

.el-dialog__wrapper { ::v-deep .el-dialog {overflow: auto;height: 439px;}}
.paperprint-container
  .search-container
  .search-container-item[data-v-7df1320d] {
  color: #004ca7;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-right: 90px;
}
.plan-entry-table-container {
  margin-top: 15px;
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
</style>
